<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 自定义插件</title>
</head>
<body>
<div id="app">
    <h1>Hello, World!</h1>
    <h1 v-my-directive>Hello, World!</h1>
</div>

<script type="module">
    import {createApp} from "../../../../js/vue.esm-browser.js";

    let app = createApp(
        {
            setup() {
                return {}
            }
        }
    )

    // 定义一个插件对象，准备保存相关内容
    let MyPlugin = {}

    MyPlugin.install = function (application, options) {
        console.log("插件已经开始安装了");
        console.log(options);

        // application 其实就是 app
        // console.log(application);

        // 定义一个自定义指令
        application.directive(
            "my-directive",
            {
                mounted(el, binding) {
                    el.style = "width:400px; height:300px; background-color:grey"
                }
            }
        )

        application.myGlobalFunction = function () {
            console.log("调用了 myGlobalFunction 函数");
        }
    }

    // app.use(MyPlugin)
    app.use(
        MyPlugin,
        {
            name: "abcque",
            gender: "M",
            age: 18,
        }
    )


    app.myGlobalFunction()

    app.mount("#app")
</script>
</body>
</html>